<template>
	<view class="haderbaritem" :style="{marginTop:36 + 'rpx'}">
		<view class="headeritembar">
			<view class="itemSelectit" @click="isItemSelect(item)" v-for="(item,index) in mapName" :key="index">
				{{item.theme_name}}
			</view>
		</view>
	</view>
	
</template>

<script setup>
	import { navbarHeight } from '@/config/systemInfo.js'
	const propos = defineProps({
		mapName:{
			type:Array,
			default:()=>[]
		}
	})
	const emits = defineEmits(['isselect'])
	const isItemSelect = (item) =>{
		emits('isselect',item)
	}
</script>

<style scoped>
	.itemSelectit{
		border-radius: 20px;
		background-color: #e6e6e6;
		font-size: 28rpx;
		margin-top: 10rpx;
		width: 200rpx;
		height: 55rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #545050;
	}
	.rightIcon{
		margin-left: 5px;
		width: 11px;
		height: 11px;
	}
	.headeritembar{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		padding: 40rpx 30rpx 0 10rpx;
		box-sizing: border-box;
	}
	.haderbaritem{
		/* display: flex; */
		align-items: flex-end;
/* 		height: 120px; */
		/* top: -150rpx; */
		/* z-index: 19; */
		padding-bottom: 12rpx;
		width: 100vw;
		background-color: white;
		border-radius: 0px 0px 5px 5px; 
		/* box-shadow:0px 5px 10px rgb(164, 164, 164); */
	}
	.xi{
		background-color: white;
		color: black;
		box-shadow:0px 5px 10px rgb(130, 130, 130); /* 较大的阴影 */
	}
	.ding{
		background-color: black;
		color: white;
	}
	.rigtword{
		border-bottom: 1px solid #545050;
		font-family:  "仓耳渔阳体 W05";
	}
	.isflex{
		font-size: 12px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 28px;
		width: 70px;
		height: 30px;
	}
	.rightbox{
		margin-left: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.leftboxall{
		display: flex;
		justify-content: space-between;
		width: 45%;
	}
</style>